<template>
  <div ref="pdfRef" class="pdf-wrap">
    <vue-pdf-embed :source="state.source" class="vue-pdf-embed" />
  </div>
</template>
<script setup>
import VuePdfEmbed from 'vue-pdf-embed'
import { createLoadingTask } from 'vue3-pdfjs/esm'
import { ref, reactive, onMounted } from 'vue'

const pdfRef = ref(null)
const props = defineProps({
  pdfUrl: {
    type: String,
    required: true
  }
}) 
const state = reactive({
  source: props.pdfUrl, // 预览pdf文件地址
  pageNum: 1, // 当前页面
  numPages: 0 // 总页数
})
const emit = defineEmits(['init'])
onMounted(() => {
  const loadingTask = createLoadingTask(state.source)
  loadingTask.promise.then(pdf => {
    state.numPages = pdf.numPages
  }).then(() => {
    setTimeout(() => {
      state.height = pdfRef.value.clientHeight / state.numPages
      emit('init', state)
    }, 100)
  })
  
})

</script>
<style lang="scss" scoped>
.pdf-preview {
  position: relative;
  height: 100vh;
  box-sizing: border-box;
  background: rgb(66 66 66);
}
.vue-pdf-embed {
  text-align: center;
  width: 550px;
  margin: 0 auto;
  box-sizing: border-box;
}
</style>